<template>
  <div style="width:70%;margin:0 auto;">
    <el-divider content-position="left">申请人</el-divider>
    <table class="Application_form" border="1" cellspacing="1" cellpadding="0">
      <!-- <tr align="center head">
        <th colspan="4" align="center">开发票申请表</th>
      </tr> -->
      <tr>
        <td align="center">申请部门</td>
        <td align="center" colspan="3">
          <input
            type="text"
            :readonly="openType == 'add' ? false : true"
            v-model="ApplyForm.manage_drawMoney_applyEmp"
            class="inputbox"
            placeholder="请选择"
            @focus="selectDep"
          />
        </td>
      </tr>
      <tr>
        <td align="center">甲方单位名称</td>
        <td align="center">
          <input
            :readonly="openType == 'add' ? false : true"
            type="text"
            v-model="ApplyForm.manage_drawMoney_firstParty"
            class="inputbox"
          />
        </td>
        <td align="center">
          甲方单位电话<span style="color:red;" v-if="current == 1">*</span>
        </td>
        <td align="center">
          <input
            :readonly="openType == 'add' ? false : true"
            type="Number"
            v-model="ApplyForm.manage_drawMoney_telephone"
            class="inputbox"
          />
        </td>
      </tr>
      <tr>
        <td align="center">开票内容</td>
        <td align="center">
          <input
            :readonly="openType == 'add' ? false : true"
            type="text"
            v-model="ApplyForm.manage_drawMoney_invoiceContent"
            class="inputbox"
          />
        </td>
        <td align="center">开票金额</td>
        <td align="center">
          <input
            :readonly="openType == 'add' ? false : true"
            type="text"
            v-model="ApplyForm.manage_drawMoney_invoiceAmount"
            class="inputbox"
          />
        </td>
      </tr>
      <tr>
        <td align="center">纳税人类别</td>
        <td align="center">
          <el-radio-group
            v-model="ApplyForm.manage_pay_taxes"
            :disabled="openType == 'add' ? false : true"
          >
            <el-radio label="1">一般纳税</el-radio>
            <el-radio label="2">小规模纳税</el-radio></el-radio-group
          >
        </td>
        <td align="center">增值税类别</td>
        <td align="center">
          <el-radio-group
            v-model="ApplyForm.manage_vat_category"
            :disabled="openType == 'add' ? false : true"
          >
            <el-radio label="1">增值税专票</el-radio>
            <el-radio label="2">增值税普票</el-radio>
          </el-radio-group>
        </td>
      </tr>
      <tr>
        <td align="center">统一社会信用代码</td>
        <td align="center">
          <input
            type="Number"
            :readonly="openType == 'add' ? false : true"
            v-model="ApplyForm.manage_credit_code"
            class="inputbox"
          />
        </td>
        <td align="center">开票日期</td>
        <td align="center">
          <el-date-picker
            :readonly="openType == 'add' ? false : true"
            v-model="ApplyForm.manage_billingDate"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </td>
      </tr>
      <tr>
        <td align="center">开户行</td>
        <td align="center">
          <input
            type="text"
            :readonly="openType == 'add' ? false : true"
            v-model="ApplyForm.manage_opening_bank"
            class="inputbox"
          />
        </td>
        <td align="center">银行账号</td>
        <td align="center">
          <input
            type="number"
            :readonly="openType == 'add' ? false : true"
            v-model="ApplyForm.manage_bank_account"
            class="inputbox"
          />
        </td>
      </tr>
      <tr>
        <td align="center">公司地址</td>
        <td align="center" colspan="3">
          <input
            type="text"
            :readonly="openType == 'add' ? false : true"
            v-model="ApplyForm.manage_company_address"
            class="inputbox"
          />
        </td>
      </tr>
      <tr>
        <td align="center">备注</td>
        <td align="center" colspan="3">
          <input
            :readonly="openType == 'headle' ? true : false"
            type="text"
            v-model="ApplyForm.manage_drawMoney_mark"
            class="inputbox"
          />
        </td>
      </tr>
    </table>

    <el-divider content-position="left">财务会计</el-divider>
    <table class="Application_form" border="1" cellspacing="1" cellpadding="0">
      <tr>
        <td align="center">收款日期</td>
        <td align="center">
          <el-date-picker
            :readonly="current === 4 ? false : true"
            type="date"
            v-model="ApplyForm.manage_drawMoney_recieveDate"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </td>
        <td align="center">收款金额</td>
        <td align="center">
          <input
            :readonly="current === 4 ? false : true"
            type="text"
            v-model="ApplyForm.manage_drawMoney_recieve"
            class="inputbox"
          />
        </td>
      </tr>
      <tr>
        <td align="center">扣除{{ manageFee }}%管理费</td>
        <td align="center">
          <input
            type="text"
            readonly
            v-model="ApplyForm.manage_drawMoney_manageFee"
            class="inputbox"
          />
        </td>
        <td align="center">扣除2%税费</td>
        <td align="center">
          <input
            readonly
            type="text"
            v-model="ApplyForm.manage_drawMoney_Taxes"
            class="inputbox"
          />
        </td>
      </tr>
    </table>

    <el-divider content-position="left">事业发展中心</el-divider>
    <table class="Application_form" border="1" cellspacing="1" cellpadding="0">
      <tr>
        <td align="center">可提金额</td>
        <td align="center">
          <input
            readonly
            type="text"
            v-model="ApplyForm.manage_drawMoney_getOut"
            class="inputbox"
          />
        </td>
        <td align="center">付款日期</td>
        <td align="center">
          <el-date-picker
            :readonly="current === 5 ? false : true"
            type="date"
            v-model="ApplyForm.manage_drawMoney_payTime"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </td>
      </tr>
      <tr>
        <td align="center">本次提款</td>
        <td align="center">
          <input
            :readonly="current === 5 ? false : true"
            type="text"
            v-model="ApplyForm.manage_drawMoney_thisDraw"
            class="inputbox"
          />
        </td>
        <td align="center">发票金额</td>
        <td align="center">
          <input
            :readonly="current === 5 ? false : true"
            type="text"
            v-model="ApplyForm.manage_drawMoney_invoice"
            class="inputbox"
          />
        </td>
      </tr>
      <tr>
        <td align="center">开票单位</td>
        <td align="center">
          <input
            type="text"
            :readonly="current === 5 ? false : true"
            v-model="ApplyForm.manage_drawMoney_invoiceCompany"
            class="inputbox"
          />
        </td>
        <td align="center">税率</td>
        <td align="center">
          <input
            :readonly="current === 5 ? false : true"
            type="text"
            v-model="ApplyForm.manage_tax_rate"
            class="inputbox"
          />
        </td>
      </tr>
      <tr>
        <td align="center">开票类型</td>
        <td align="center">
          <el-radio-group v-model="ApplyForm.manage_ticket_category">
            <el-radio label="1">材料票</el-radio>
            <el-radio label="2">劳务票</el-radio>
          </el-radio-group>
        </td>
        <td align="center" colspan="2"></td>
      </tr>

      <tr v-if="openType == 'headle'">
        <td align="center">意见<span style="color:red;">*</span></td>
        <td align="center" colspan="3">
          <input type="text" v-model="reasons" class="inputbox" />
        </td>
      </tr>
    </table>

    <div>
      说明：“统一社会信用代码、地址、电话、开户行、银行账号”四项只需在第一次开票的时候填写即可，即同一项目从第二次开票开始此四项可省略。
    </div>
    <div style="width:100%;text-align:center;">
      <el-form inline size="mini">
        <el-form-item v-if="openType != 'check' && userTaskName != '结束'">
          <el-select v-model="userid" placeholder="没绑定审核人">
            <el-option
              v-for="item in AuditorList"
              :key="item.userid"
              :value="item.userid"
              :label="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="openType == 'add'">
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
        <el-form-item v-else-if="openType == 'headle'">
          <template v-for="(item, index) in buttonList">
            <el-button
              v-if="item == 'submit'"
              :key="index"
              type="success"
              size="mini"
              @click="headleprocess(true)"
              >提交</el-button
            >
            <el-button
              v-if="item == 'Resubmit'"
              :key="index"
              type="success"
              size="mini"
              @click="headleprocess(true)"
              >重新提交</el-button
            >
            <el-button
              v-else-if="item == 'reject'"
              :key="index"
              type="warning"
              size="mini"
              @click="headleprocess(false)"
              >驳回</el-button
            >
            <el-button
              v-else-if="item == 'disagree'"
              :key="index"
              type="danger"
              size="mini"
              @click="headleprocess('finish')"
              >不同意</el-button
            >
          </template>
        </el-form-item>
      </el-form>
    </div>
    <el-divider content-position="left">
      流程线
    </el-divider>
    <el-steps :active="current" :align-center="true" finish-status="success">
      <el-step
        v-for="(item, index) in activityList"
        :title="item.name"
        :key="index"
      ></el-step>
    </el-steps>
    <div v-if="openType !== 'add'">
      <el-divider content-position="left">审批记录</el-divider>
      <el-table :data="historyList" border>
        <el-table-column
          v-for="(item, index) in header"
          :key="index"
          :label="item[0]"
          :prop="item[1]"
          :type="index == 0 ? 'index' : ''"
          :width="item[2]"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-dialogDrag
      :visible.sync="isopenDep"
      title="选择部门"
      :append-to-body="true"
      top="10vh"
      width="30%"
    >
      <select-department
        @setSelectName="getSelectName"
        v-if="isopenDep"
      ></select-department>
    </el-dialog>
  </div>
</template>

<script>
import selectDepartment from "@/components/Ca-select/select-department(Cause)";
import { changetime } from "@/components/global-fn/global-fn";
import {
  apiDrawMoneyView,
  apiDrawProcessList,
  apistartDrawMoney,
  apipassDrawMoney
} from "@/request/api.js";
export default {
  name: "ApplicationForm",
  data() {
    return {
      ApplyForm: {
        manage_vat_category: "1",
        manage_pay_taxes: "1",
        manage_ticket_category: "1"
      },
      historyList: [],
      header: [
        ["序号"],
        ["审核人", "username"],
        ["步骤名称", "name_"],
        ["审核意见", "MESSAGE_"],
        ["审核时间", "END_TIME_"],
        ["中心", "center_name"]
      ],
      AuditorList: [],
      Auditor: "",
      isopenDep: false,
      buttonList: [],
      activityList: [],
      reasons: "",
      userid: 0,
      current: 1,
      currentTask: {},
      userTaskName: ""
    };
  },
  components: {
    selectDepartment
  },
  props: {
    drawfundsId: {
      type: Number
    },
    draw_headform: Object,
    openType: String,
    active: Object
  },
  watch: {
    // 监听收款金额，计算管理费和税费
    "ApplyForm.manage_drawMoney_recieve"(val) {
      if (val) {
        this.ApplyForm.manage_drawMoney_manageFee =
          this.ApplyForm.manage_contract_managementFee * val * 0.01;
        this.ApplyForm.manage_drawMoney_Taxes =
          this.ApplyForm.manage_drawMoney_recieve * 0.02;
        this.ApplyForm.manage_drawMoney_getOut = (
          ((100 - 2 - this.ApplyForm.manage_contract_managementFee) / 100) *
          val
        ).toFixed(2);
      }
    }
  },
  computed: {
    // 判断管理费是否存在
    manageFee() {
      let manageFee =
        this.draw_headform && this.draw_headform.manage_contract_managementFee
          ? this.draw_headform.manage_contract_managementFee
          : this.ApplyForm.manage_contract_managementFee
          ? this.ApplyForm.manage_contract_managementFee
          : 0;
      return manageFee;
    }
  },
  created() {
    console.log(this.openType);
    if (this.openType !== "add") {
      this.getView();
    } else {
      this.getprossList();
    }
  },
  methods: {
    headleprocess(type) {
      if (this.reasons == "") {
        this.$message.error("请填写审核意见");
        return;
      }
      if (this.userid === "" && type) {
        this.$message.error("审核人为空不能提交！");
        return;
      }
      this.ApplyForm.taskid = this.active.ID_;
      this.ApplyForm.taskName = this.active.NAME_;
      this.ApplyForm.type = type;
      this.ApplyForm.reasons = this.reasons;
      this.ApplyForm.userid = this.userid;
      console.log(this.ApplyForm);
      this.$confirm(
        `确定${type === true ? "办理" : type === false ? "驳回" : "不同意"}吗？`
      )
        .then(() => {
          apipassDrawMoney(this.ApplyForm).then(res => {
            this.$message.success(res.msg);
            this.$emit("close");
          });
        })
        .catch(() => {});
    },
    getSelectName(row) {
      this.ApplyForm.manage_drawMoney_applyEmp = row.constuct_project_dep_name;
      this.isopenDep = false;
    },
    selectDep() {
      if (this.openType !== "headle") {
        this.isopenDep = true;
      }
    },
    save() {
      if (
        this.ApplyForm.manage_drawMoney_telephone == "" ||
        !this.ApplyForm.manage_drawMoney_telephone
      ) {
        this.$message.warning("请补充电话号码");
        return false;
      }
      if (this.ApplyForm.manage_drawMoney_telephone.length !== 11) {
        this.$message.warning("电话号码长度不符合");
        return false;
      }
      this.ApplyForm.manage_drawMoney_contractId = this.draw_headform.manage_contract_id;
      this.ApplyForm.userid = this.userid;
      this.$confirm(`确定提交吗？`)
        .then(() => {
          apistartDrawMoney(this.ApplyForm).then(res => {
            this.$message.success(res.msg);
            this.$emit("close");
          });
        })
        .catch(() => {});
    },
    getprossList() {
      let data = {};
      if (this.active) {
        data = {
          taskid: this.active.ID_, //(必填)流程任务id
          processInstanceId: this.active.PROC_INST_ID_
            ? this.active.PROC_INST_ID_
            : this.active.taskid, //(必填)流程实例id
          key: "DrawMoney", //(必填)流程定义key
          type: "" //(必填)新增new/运行中
        };
      } else {
        data = {
          taskid: "", //(必填)流程任务id
          processInstanceId: "", //(必填)流程实例id
          key: "DrawMoney", //(必填)流程定义key
          type: "new" //(必填)新增new/运行中
        };
      }
      apiDrawProcessList(data).then(res => {
        console.log(res);
        // 获取流程线
        this.activityList = res.activityList;
        //获取当前审批的最后一行
        if (this.historyList != "") {
          this.currentTask = this.historyList[this.historyList.length - 1];
          //遍历获取当前节点
          this.activityList.forEach((item, index) => {
            if (item.name == this.currentTask.name_) {
              this.current =
                this.currentTask.END_TIME_ == "" ? index : index + 1;
            }
          });
        }
        this.userTaskName =
          this.currentTask.name_ ==
          this.activityList[this.activityList.length - 1].name
            ? "结束"
            : "";
        // 办理的按钮数组
        this.buttonList = res.startForm.split(",");
        // 下一审核人数组
        this.AuditorList = res.userlist.userList ? res.userlist.userList : [];
        // 获取当前节点审批人id，当当前节点为最后节点时，userid为0，当审核人数组不为空，获取第一个数组为默认审核人
        this.userid =
          this.userTaskName == "结束"
            ? 0
            : this.AuditorList != ""
            ? this.AuditorList[0].userid
            : "";
      });
    },
    getView() {
      let data = { manage_drawMoney_id: this.drawfundsId };
      apiDrawMoneyView(data).then(res => {
        console.log(res);
        this.ApplyForm = res.data;
        //当纳税类型和增值税类型为空或者为0，则初始为1
        this.ApplyForm.manage_pay_taxes =
          this.ApplyForm.manage_pay_taxes === 0 ||
          this.ApplyForm.manage_pay_taxes == null
            ? 1
            : this.ApplyForm.manage_pay_taxes;
        this.ApplyForm.manage_vat_category =
          this.ApplyForm.manage_vat_category === 0 ||
          this.ApplyForm.manage_vat_category == null
            ? 1
            : this.ApplyForm.manage_vat_category;
        // 当审批记录存在时，遍历记录，把结束时间转换为国际时间
        this.historyList = res.historyList
          ? res.historyList.map(item => {
              item.END_TIME_ = item.END_TIME_ ? changetime(item.END_TIME_) : "";
              return item;
            })
          : [];
        // 调用获取流程线接口
        this.getprossList();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.Application_form {
  width: 100%;
  background: #555;
}
.Application_form td:nth-child(n) {
  width: 20%;
}
.Application_form td:nth-child(2n) {
  width: 30%;
}
.Application_form td {
  height: 40px;
  background: #fff;
}
.Application_form th {
  height: 45px;
  font-size: 16px;
  background: #fff;
}
.inputbox {
  width: 100%;
  height: 40px;
}
</style>
